<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="statusBar orangeBg"></view>
		<diyNav :proNavTit="proNavTit" :otherBgFlag="true" :otherBgCls="otherBgCls" @backPage="backPage"></diyNav>
		<!-- #endif -->
		<view class="totalPj">
			<!-- #ifdef APP-PLUS -->
			<view class="orangeBg"></view>
			<!-- #endif -->
			<view class="pjScore">
				<view class="scoreItem">
					<view class="scoreNum">{{pjScore}}</view>
					<view class="scoreTit">综合评分</view>
					<view class="lineView"></view>
				</view>
				<view class="scoreItem">
					<view class="scoreNum">{{pjTotalNum}}</view>
					<view class="scoreTit">条真实评价</view>
				</view>
			</view>
			<view class="infoWrap padd hasFlex">
				<view class="infoItem">
					<view class="infoCon">{{pjANum}}</view>
					<view>好评次数</view>
					<view class="lineView"></view>
				</view>
				<view class="infoItem">
					<view class="infoCon">{{pjBNum}}</view>
					<view>中评次数</view>
					<view class="lineView"></view>
				</view>
				<view class="infoItem">
					<view class="infoCon">{{pjCNum}}</view>
					<view>差评次数</view>
				</view> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			pjScore:Number,
			pjTotalNum:Number,
			pjCNum:Number,
			pjANum:Number,
			pjBNum:Number
		},
		data(){
			return{
				score:3,
				proNavTit:'全部评价',
				otherBgCls:'orangeBg'
			}
		},
		methods:{
			backPage(){
				this.$emit('backPage')
			}
		}
	}
</script>

<style lang='scss' scoped>
	.infoWrap{
		margin-top: 10rpx;
		.infoItem{
			width: 33.3%;
			padding: 10rpx 0;
			position: relative;
			font-size: $font-size26;
			color: $pss-text-colora;
			text-align: center;
			.infoCon{
				color: $pss-text-color3;
				font-size:36rpx;
				margin-bottom: 5rpx;
			}
			.lineView{
				width: 1rpx;
				height: 30%;
				background: #eee;
				position: absolute;
				right: 0;
				top: 35%;
			}
		}
	}
	.totalPj{
		margin-bottom: 20rpx;
		background: #fff;
		/* height: 350rpx; */
		height: 260rpx;
		position: relative;
		/* #ifdef APP-PLUS */
		padding: 20rpx 30rpx 0;
		margin-top: calc(var(--status-bar-height) + 90rpx);
		border-radius: 50rpx 50rpx 0 0;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding: 0rpx 30rpx;
		/* #endif */
		.orangeBg{
			width: 100%;
			height: 60rpx;
			position: absolute;
			left: 0;
			top: 0;
			background: #ffa510;
			z-index: -1;
		}
	}
	.pjStarItem{
		display: flex;
		align-items: center;
		font-size: $font-size26;
		.starTit{
			color: $pss-text-color8;
			margin-right: 20rpx;
		}
		.starRes{
			margin-left: 30rpx;
			color: $pss-text-color3;
		}
	}
	.pjScore{
		display: flex;
		margin-bottom: 10rpx;
		.scoreItem{
			width: 50%;
			position: relative;
			text-align: center;
			padding: 10rpx 0;
			.scoreNum{
				font-size: 60rpx;
				font-weight: bold;
				color: #ffa70f;
			}
			.scoreTit{
				font-size: $font-size24;
				color: $pss-text-color8;
			}
			.lineView{
				width: 1rpx;
				height: 36%;
				position: absolute;
				right: 0;
				top: 32%;
				background: #eee;
			}
		}
	}
</style>